import { useDark, useToggle } from '@vueuse/core'
import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

export const useThemeStore = defineStore(
  'theme',
  () => {
    // 使用 VueUse 的 useDark 来管理暗黑模式
    const isDark = useDark({
      selector: 'html',
      attribute: 'class',
      valueDark: 'dark',
      valueLight: ''
    })

    const toggleDark = useToggle(isDark)

    // 主题色（默认 Element Plus 蓝色）
    const primaryColor = ref('#409eff')

    /**
     * 切换暗黑模式（带动画）
     */
    const toggleTheme = (event?: MouseEvent) => {
      if (!event) {
        toggleDark()
        return
      }

      const x = event.clientX
      const y = event.clientY

      document.documentElement.style.setProperty('--x', x + 'px')
      document.documentElement.style.setProperty('--y', y + 'px')

      // 使用 View Transition API（如果支持）
      if (document.startViewTransition) {
        document.startViewTransition(() => {
          toggleDark()
        })
      } else {
        toggleDark()
      }
    }

    /**
     * 设置主题色
     */
    const setPrimaryColor = (color: string) => {
      primaryColor.value = color
      document.documentElement.style.setProperty('--el-color-primary', color)
    }

    // 初始化主题色
    if (primaryColor.value) {
      setPrimaryColor(primaryColor.value)
    }

    // 监听主题色变化
    watch(primaryColor, (newColor) => {
      if (newColor) {
        setPrimaryColor(newColor)
      }
    })

    return {
      isDark,
      primaryColor,
      toggleTheme,
      toggleDark,
      setPrimaryColor
    }
  },
  {
    persist: {
      key: 'theme',
      storage: localStorage,
      pick: ['isDark', 'primaryColor']
    }
  }
)

